<template>
  <div class="index" v-if="echongs">
    <a class="zwddb"></a>
    <SearchTop class="topssk"></SearchTop>
    <!-- 这是一个轮播图 -->
    <div class="lbt">
      <swiper ref="mySwiper" :options="swiperOptions" v-if="echongs.data.datas.list">
        <swiper-slide
          v-for="v in echongs.data.datas.list[0].data.images"
          :key="v.advid"
          
        >
          <a v-if="v.target" :href="v.target.param">
            <img width="100%" :src="v.img_url" alt="" />
          </a>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <a
      data=""
      href="https://wap.epet.com/app/authPublicity/index?version=578&amp;fw=2&amp;pet_type=dog"
      class="rela db tzljpz"
      style="margin-top: -5px"
      v-if="echongs.data.datas.list"
    >
      <img
        width="100%"
        :src="echongs.data.datas.list[0].data.propagate.img_url"
        alt=""
      />
      <img
        data-v-8994447c=""
        :src="echongs.data.datas.list[0].data.arrowhead.img_url"
        width="36px"
        class="qzbz"
      />
    </a>
    <!-- 这是10大模块 -->

    <a
      class="abloc"
      :href="v.target.param"
      v-for="(v, i) in echongs.data.datas.list[1].data.menus"
      :key="i"
      width="20%"
      v-lazy-container="{
        selector: 'img',
        error: 'https://wap.epet.com/app/images/error.png',
        loading: 'https://wap.epet.com/app/images/loading.png',
      }"
    >
      <img width="100%" :data-src="v.img_url" alt="" :key="v.img_url" />
    </a>

    <a
    v-if="echongs.data.datas.list[2].data.column_images"
      class="kuand"
      data-v-4440f7b1=""
      :href="echongs.data.datas.list[2].data.column_images[0][0].param.param"
      v-lazy-container="{
        selector: 'img',
        error: 'https://wap.epet.com/app/images/error.png',
        loading: 'https://wap.epet.com/app/images/loading.png',
      }"
      ><img
        width="100%"
        data-v-4440f7b1=""
        name="750x173"
        class="default_bg"
        :data-src="echongs.data.datas.list[2].data.column_images[0][0].img_url"
    /></a>
    <a
    v-for="(item) in echongs.data.datas.list[3].data.column_images" :key="item[0].advid"
      :id="item[0].advid"
      v-lazy-container="{
        selector: 'img',
        error: 'https://wap.epet.com/app/images/error.png',
        loading: 'https://wap.epet.com/app/images/loading.png',
      }"
      class="kuand50"
    >
      <img
        width="100%"
        :data-src="item[0].img_url"
        alt=""
      />
    </a>
    
    <dandanyouli />
    <!-- 灰色模块 -->
    <div class="hsbj">
      <!-- 每日疯抢组件 -->
      <everyday></everyday>
      <!-- 养宠风尚 -->
      <fengshang></fengshang>
      <!-- 心选优惠 -->
      <xinxuan></xinxuan>
      <!-- 猜你喜欢 -->
      <like></like>

      <!-- <a style="color: red">sasasa</a> -->
    </div>

    <!-- 底部导航栏 -->
    <buttomtab :selectNav="1" class="tabbuttm"></buttomtab>
    <!-- 填充底部导航 -->
    <a class="zwddb"></a>
  </div>
</template>
<script>
import SearchTop from "../components/SearchTop.vue";
import buttomtab from "../components/buttomtab.vue";
import dandanyouli from "../components/dandanyouli.vue";
import everyday from "../components/everyday.vue";
import fengshang from "../components/fengshang.vue";
import xinxuan from "../components/xinxuan.vue";
import like from "../components/like.vue";
import { mapState } from "vuex";
export default {
  name: "index",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        autoplay: true,
        loop: true,
      },
    };
  },
  mounted() {
   
  },
  computed: {
    ...mapState(["echongs"]),
  },
  components: {
    SearchTop,
    buttomtab,
    dandanyouli,
    everyday,
    fengshang,
    xinxuan,
    like,
  },
};
</script>
<style lang="less" scoped>
.kuand {
  display: block;
  width: 100%;
  height: 1.73rem;
}
.kuand50 {
  display: inline-block;
  width: 25%;
  height: 2.14rem;
}
.hsbj {
  box-sizing: border-box;
  width: 7.5rem;
  background-color: rgb(247, 247, 247);
}
.abloc {
  display: inline-block;
  width: 20%;
}
.tabbuttm {
  position: fixed;
  width: 100%;
  height: 1.04rem;
  background-color: #fff;
  bottom: 0;
  left: 0;
}
.topssk {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.zwddb {
  display: block;
  width: 100%;
  height: 1.2rem;
  background-color: #fff;
}
.swiper-pagination {
  margin-left: -2rem;
}
.index {
  background-color: rgb(214, 185, 250);
}
.default_bg {
  width: 7.5rem;
}
.tzljpz {
  -webkit-text-size-adjust: 100%;
  font-family: Microsoft Yahei, -apple-system-font, Helvetica Neue, sans-serif;
  margin: 0 auto 0.2rem;
  box-sizing: border-box;
  position: relative;
  top: -0.16rem;
  padding-top: 8px;
  height: 1.206rem;
  background-color: rgb(138, 117, 207);
  display: block;
  width: 7.104rem;
}
.qzbz {
  -webkit-text-size-adjust: 100%;
  line-height: 1.6;
  font-family: Microsoft Yahei, -apple-system-font, Helvetica Neue, sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: #333;
  width: 0.72rem;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: middle;
  border: 0;
  position: absolute;
  top: 0.1rem;
  right: 0.4rem;
}
.lbt {
  width: 100%;
  padding-top: 0.2rem;
  height: 3rem;
  background-color: rgb(214, 185, 250);
  > div {
    height: 100%;
    width: 7.1rem;
    background-color: rgb(100, 232, 255);
    margin: 0 auto;
    border-radius: 0.4rem;
  }
}
</style>
